<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div id="box" style="width: 100px; height: 100px; background: blue;"></div>

<script>
  var t = async_test('Integration test for background style change updates');

  t.step(function() {
    assert_true(!!window.internals, 'Test requires window.internals');
  });

  // Loading is non-deterministic so record the initial count after onload
  // plus a paint.
  onload = function() {
    requestAnimationFrame(function() {
      // Windows flakily sends mouse events on the first frame so wait an
      // additional frame before starting the test.
      requestAnimationFrame(function() {
        var initialLifecycleCount = internals.LifecycleUpdateCount();

        box.style.background = 'green';

        requestAnimationFrame(function() {
          var postChangeCount = internals.LifecycleUpdateCount();
          t.step(function() {
            // A background style change should have only resulted in a single
            // lifecycle update. If this ever fails, something is causing an
            // unnecessary lifecycle update.
            assert_equals(postChangeCount, initialLifecycleCount + 1,
                'a style change should cause one lifecycle update');
          });

          // A timeout is used so we can capture unnecessary updates. 250ms was
          // chosen because it is the lowest value that would reliably fail for
          // https://crbug.com/866981 and https://crbug.com/868983 on bots; lower
          // values would just become flaky.
          setTimeout(function() {
            t.step(function() {
              // The timeout should cause a single additional update. If this ever
              // fails, something is causing an unnecessary lifecycle update.
              assert_equals(internals.LifecycleUpdateCount(), postChangeCount + 1,
                  'a timeout should cause one lifecycle update');
            });
            t.done();
          }, 250);
        });
      });
    });
  }
</script>
